<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>APP-注册</title>

    <link rel="icon" href="image/public/Logo.ico">
    <link rel="stylesheet" href="css/app-login/app-login.css">
    <link rel="stylesheet" href="css/app-post/app-post.css">
    <link rel="stylesheet" href="css/bottom/bottom.css">
    <link rel="stylesheet" href="element/index.css">



    <style>
        html {
            font-size: 50px;
        }

        @media screen and (min-width:375px) {
            html {
                font-size: 25px;
            }
        }

        @media screen and (min-width:390px) {
            html {
                font-size: 26px;
            }
        }

        @media screen and (min-width:414px) {
            html {
                font-size: 27.6px;
            }
        }

        @media screen and (min-width:820px) {
            html {
                font-size: 54.6px;
            }
        }
        .bottom ul{
            margin-top: 1rem;
            margin-left: 1.5rem;
        }
    </style>
</head>
<body style="background: url(./image/login-post/lp1.jpg) 0% 0% /cover no-repeat;">
    <div id="app">
        <div id="max">
            <div id="max-son">
                <div class="title">
                    <div class="title-box">
                        <a href="">
                            <img src="./image/login-post/lp2.png" alt="">
                        </a>
                    </div>
                </div>
                <div class="head-lp">
                    <div class="head-main">
                        <span class="phone-post">手机注册</span>
                        <span class="email-post">邮箱注册</span>
                    </div>
                    <div class="head-line2"></div>
                </div>
                <div class="content">
                    <div class="content-son">
                        <div class="con-post1">
                            <div class="post1-div1">
                                <div class="post-phone-num">
                                    <div class="post-num-con">
                                        <span>+86</span> 
                                        <img src="./image/login-post/lp5.png" alt="">
                                    </div>
                                    <input type="text" id="post-phone" placeholder="手机号码">
                                    <div class="phone-phone-num-txt">
                                        <span class="have-phone-yzm">发送验证码</span>
                                    </div>
                                </div>
                                <input type="text" id="post-pwd-yzm" placeholder="验证码">
                            </div>
                            <div class="go-post-div">
                                <a href="http://127.0.0.1:5502/AppPage/app-login.html">已有账号？立马登录</a>
                            </div>
                            <div class="btn-box2">
                                <button class="go-next-btn">下一步</button>
    
                                <p class="go-user-xx">
                                    <span>注册视为同意<a href="">《第六感用户协议》</a></span>
                                </p>
                                
                                <div class="pleas-post-phone">
                                    手机号有误！
                                </div>
                                <div class="pleas-post-pwd">
                                    验证码有误！
                                </div>
                            </div>
                        </div>
                        <div id="next-div">
                            <div class="next-pwd-div1">
                                <input type="password" id="next-post-pwd1" placeholder="密码">
                                <input type="password" id="next-post-pwd2" placeholder="确认密码">
                            </div>
                            <div class="next-pwd-img1">
                                <img class="next-pwd-open1" src="./image/login-post/lp4.png" alt="">
                                <img class="next-pwd-close1" src="./image/login-post/lp3.png" alt="">
                            </div>
                            <div class="next-pwd-img2">
                                <img class="next-pwd-open2" src="./image/login-post/lp4.png" alt="">
                                <img class="next-pwd-close2" src="./image/login-post/lp3.png" alt="">
                            </div>
                            <div class="go-post-div" style="margin-top: -2rem;">
                                <a href="http://127.0.0.1:5502/AppPage/app-login.html">已有账号？立马登录</a>
                            </div>
                            <div class="btn-box2" style="margin-top: 0.5rem;">
                                <button class="sure-btn-post" @click="register">确认注册</button>
    
                                <div class="pwd-all-post">请将信息输入完整!</div>
    
                                <div class="equally-pwd">俩次密码要一致</div>
                            </div>
                        </div>
                        <div class="con-post2">
                            <div class="post2-div1">
                                <div class="email-yzm-div">
                                    <input type="text" id="email-num" placeholder="邮箱">
                                    <div class="send-out-yzm"><div class="send-out-son">发送验证码</div></div>
                                </div>
                                <div class="sure-yzm-div">
                                    <div class="sure-yzm-div-son1">
                                        <div class="yzm-img-div">
                                            <img src="./image/login-post/lp6.png" alt="">
                                        </div>
                                        <input type="text" placeholder="验证码" id="yzm-email-input">
                                    </div>
                                </div>
                                <div class="sure-yzm-div">
                                    <div class="sure-yzm-div-son2">
                                        <div class="yzm-img-div">
                                            <img src="./image/login-post/lp7.png" alt="">
                                        </div>
                                        <input type="password" placeholder="密码" id="pwd-email-input">
                                    </div>
                                    <div class="email-pwd-img1">
                                        <img class="email-pwd-open1" src="./image/login-post/lp4.png" alt="">
                                        <img class="email-pwd-close1" src="./image/login-post/lp3.png" alt="">
                                    </div>
                                </div>
                                <div class="sure-yzm-div">
                                    <div class="sure-yzm-div-son3">
                                        <div class="yzm-img-div">
                                            <img src="./image/login-post/lp7.png" alt="">
                                        </div>
                                        <input type="password" placeholder="确认密码" id="pwd2-email-input">
                                    </div>
                                    <div class="email-pwd-img2">
                                        <img class="email-pwd-open2" src="./image/login-post/lp4.png" alt="">
                                        <img class="email-pwd-close2" src="./image/login-post/lp3.png" alt="">
                                    </div>
                                </div>
                                <div class="go-post-div" style="margin-left: -1.2rem; margin-top: -1rem;">
                                    <a href="http://127.0.0.1:5502/AppPage/app-login.html">已有账号？立马登录</a>
                                </div>
                                <div class="btn-box2" style="margin-left: -0.1rem; margin-top: 0.5rem;">
                                    <button class="sure-post-btn">确认注册</button>
        
                                    <p class="go-user-xx">
                                        <span>注册视为同意<a href="">《第六感用户协议》</a></span>
                                    </p>
                                    
                                    <div class="pleas-email-inp">
                                        邮箱不能为空!
                                    </div>
                                    <div class="pleas-yzm-inp">
                                        验证码有误！
                                    </div>
                                    <div class="email-pwd-null1">
                                        密码不能为空!
                                    </div>
                                    <div  class="email-pwd-null2">
                                        俩次密码必须一致!
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                 
            </div>
        </div>
    </div>
</body>


<script src="jquery/jquery-3.6.0.js"></script>
<script src="js/api.js"></script>
<script src="vue/vue.min.js"></script>
<script src="axios/axios.js"></script>
<script src="js/app-post.js"></script>
<script src="element/index.js"></script>
</html>